// var
@fileviewer-prefix-cls       : x-file-viewer;
@fileviewer-main-color       : #A5907B;
@fileviewer-bg-color         : #16151A;
@fileviewer-border-color     : #dfe2e5;
@fileviewer-font-size-small  : 12px;
@fileviewer-font-size        : 14px;
@fileviewer-font-size-large  : 16px;
@fileviewer-font-color       : #666;
@fileviewer-menu-zindex      : 10;

// mixins
.fileviewer-size(@base-size) {
  font-size: @base-size;
  .@{fileviewer-prefix-cls} {
    &__menu {
      width: @base-size * 20;
      &_head {
        height: @base-size * 3;
        line-height: @base-size * 3;
      }
      &_btn {
        .size(@base-size * 1.2, @base-size * 3.6);
      }
      &_item_poster {
        height: @base-size * 8;
      }
    }
  }
}
@keyframes spinner {
  0% {transform: rotate(0deg);}
  100% {transform: rotate(360deg);}
}

// styles
.@{fileviewer-prefix-cls} {
  .size(100%, 100%);
  .fileviewer-size(@fileviewer-font-size);
  box-shadow: 0 0 5px fade(@fileviewer-bg-color, 40%);
  background-color: tint(@fileviewer-bg-color, 20%);
  overflow: hidden;
  position: relative;
  &__menu {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: @fileviewer-menu-zindex;
    border-right: 1px solid fade(@fileviewer-main-color, 60%);
    transition: all .5s ease;
    color: tint(@fileviewer-main-color, 50%);
    background-color: fade(tint(@fileviewer-bg-color, 15%), 75%);
    display: flex;
    flex-direction: column;
    padding-bottom: 3.5em;
    &-collapse {
      transform: translateX(-100%);
    }
    &_head {
      line-height: 3;
      border-bottom: 1px solid fade(@fileviewer-main-color, 60%);
      .fl {
        width: calc(100% - 3em);
        height: 100%;
        padding: 0 .5em;
        letter-spacing: .1em;
      }
      .fr {
        width: 3em;
        height: 100%;
        padding: 0 .5em;
        text-align: center;
        cursor: pointer;
      }
    }
    &_body {
      height: 0;
      flex-grow: 1;
      padding: .5em;
      text-align: left;
      overflow: hidden auto;
      &-nodata {
        margin-top: 5em;
        text-align: center;
        color: fade(tint(@fileviewer-main-color, 50%), 60%);
      }
    }
    &_btn {
      position: absolute;
      left: 100%;
      top: 60%;
      border-radius: 0 .3em .3em 0;
      background-color: tint(@fileviewer-bg-color, 15%);
      cursor: pointer;
      .flex-center;
    }
    &_item {
      padding: .2em .5em;
      margin-bottom: .5em;
      cursor: pointer;
      &_label {
        line-height: 2;
        .text-ellipsis;
      }
      &_poster {
        padding-bottom: .3em;
        img {
          display: block;
          width: 100%;
          height: 100%;
        }
      }
      &:hover, &:focus, &.active {
        background-color: rgba(255,255,255,.15);
        text-shadow: 1px 1px 1px @fileviewer-bg-color;
      }
    }
  }
  &__empty {
    .absolute-transform-center;
    font-size: @fileviewer-font-size;
    line-height: 1.1;
    color: tint(@grey-color, 50%);
    .xvu-iconfont {
      font-size: 4em;
    }
  }
  .x-image-viewer,
  .x-office-viewer,
  .x-text-viewer,
  .x-pdf-viewer,
  .x-pdf-viewer-mobile {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }
  .x-office-viewer {
    &__docx,
    &__pptx,
    &__xlsx {
      width: 100%;
      height: 100%;
      overflow: auto;
      background-color: #fff;
    }
    iframe {
      display: block;
      width: 100%;
      height: 100%;
    }
    table {
      width: 100%;
      border: 1px solid @fileviewer-border-color;
      tr:nth-child(2n) {
        background-color: tint(@fileviewer-border-color, 60%);
      }
      td, th {
        border: 1px solid @fileviewer-border-color;
        padding: .6em 1em;
      }
    }
  }
  .x-text-viewer {
    padding: 1em;
    color: @fileviewer-font-color;
    line-height: 1.5;
    overflow: hidden auto;
    white-space: pre-wrap;
    text-shadow: 1px 1px 0 #fff;
    background-color: tint(@fileviewer-main-color, 90%);
  }
  .x-audio {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
  }
  .x-pdf-viewer-mobile {
    overflow-x: hidden;
    overflow-y: auto;
  }
}

// styles - more
.@{fileviewer-prefix-cls} {
  &-small {
    .fileviewer-size(@fileviewer-font-size-small);
  }
  &-large {
    .fileviewer-size(@fileviewer-font-size-large);
  }
}
